/*
 * @Description: 包车订单详情页面
 * @Author: buwei.huang
 * @Date: 2019-07-09 18:09:41
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-03 15:59:02
 */
<template>
  <div id="app">
    <!-- 标题栏 -->
    <title-bar />
    <div
      class="warp"
      v-show="show === DATA_LIST"
    >
      <div class="bcOrderForm_content">
        <!-- 订单状态 -->
        <order-from-status :dataInfo="dataInfo" />
        <!-- 车辆信息 -->
        <order-from-car-info :dataInfo="dataInfo" />
        <!-- 订单详情 -->
        <order-from-detail :dataInfo="dataInfo" />
        <!-- 备选联系信息 -->
        <alternative-info :dataInfo="dataInfo" />
      </div>
      <!-- 背景渐变 -->
      <div class="bg_warp">
        <div class="bg_shape">
          <div class="bg_color"></div>
        </div>
      </div>
    </div>
    <!-- 网络超时展示无网络 -->
    <net-error
      @click.native="onNetError"
      v-show="show === DATA_NETERROR"
    />
    <!-- 动态加载按钮 -->
    <div
      class="bc_content_btns flex-h flex-hsb flex-vc"
      :class="!isBtnState ? 'isBtnStatePad' : ''"
      v-if="btnList.length > 0"
    >
      <template v-for="(item,index) in btnList">
        <component
          :is="getComponent(item)"
          :isCancleWidth="btnList.length < 2"
          :key="'btn_' + index"
          :mask="mask"
          @afreshState="afreshState"
        ></component>
      </template>
    </div>
    <!-- 弹出评价组件 -->
    <appraise
      ref="appraise"
      :dataInfo="dataInfo"
      @isHideBtn="isHideBtn"
    />
  </div>
</template>
<style>
</style>

<script>
import NetError from '@/components/NetError'
import Titlebar from './components/Titlebar'
import OrderFromStatus from './components/OrderFromStatus'
import OrderFromDetail from './components/OrderFromDetail'
import OrderFromCarInfo from './components/OrderFromCarInfo'
import AlternativeInfo from './components/AlternativeInfo'
import Appraise from './components/Appraise'
import cancleBtn from './components/btnsComponent/cancleBtn'
import payBtn from './components/btnsComponent/payBtn'
import againBtn from './components/btnsComponent/againBtn'
import appraiseBtn from './components/btnsComponent/appraiseBtn'
import { getOrderFromInfo } from './api/api.js'

// 按钮
const CANCLE_BTN = 1 // 取消预约
const PAY_BTN = 2 // 立即支付
const AGAIN_BTN = 3 // 再次预约
const APPRAISE_BTN = 4 // 立即评价

export default {
  name: 'bcOrderForm',
  components: {
    'title-bar': Titlebar,
    'order-from-status': OrderFromStatus,
    'order-from-detail': OrderFromDetail,
    'order-from-car-info': OrderFromCarInfo,
    'alternative-info': AlternativeInfo,
    'appraise': Appraise,
    'cancle-btn': cancleBtn,
    'pay-btn': payBtn,
    'again-btn': againBtn,
    'appraise-btn': appraiseBtn,
    'net-error': NetError
  },
  data() {
    return {
      show: 1,
      DATA_LIST: 1, // 正常数据显示
      DATA_NETERROR: 2, // 网络超时展示
      STATE_CANCEL: '3', // 已取消
      STATE_SUCCESS: '2', // 预约成功
      STATE_AWAIT: '0', // 待提交
      STATE_SUBMITTED: '1', // 已提交
      dataInfo: {}
    }
  },
  mounted() {
    this._getData()
  },
  computed: {
    // 显示btn
    isBtnState() {
      return this.dataInfo.btnList ? this.dataInfo.btnList.length > 1 : false
    },
    btnList() {
      return this.dataInfo.btnList ? this.dataInfo.btnList : []
    },
    mask() {
      return this.$refs.appraise.$refs.mask
    }
  },
  methods: {
    _getData() {
      getOrderFromInfo().then(res => {
        this.show = this.DATA_LIST
        this.dataInfo = res
        console.warn(this.dataInfo, 11111)
      }).catch(err => {
        console.dir(err)
        if (err.error.code === 'ECONNABORTED') {
          this.show = this.DATA_NETERROR
        }
      })
    },
    // 动态加载组件
    getComponent(type) {
      switch (type) {
        case CANCLE_BTN:
          return 'cancle-btn'
        case PAY_BTN:
          return 'pay-btn'
        case AGAIN_BTN:
          return 'again-btn'
        case APPRAISE_BTN:
          return 'appraise-btn'
      }
    },
    // 重新获取预约单状态
    afreshState() {
      console.log('~~~~~~~~~~~afreshState~~~~~~~~~~~~~~~')
      this._getData()
    },
    // 隐藏btn
    isHideBtn() {
      this.dataInfo.btnList = []
    },
    // 无网络点击
    onNetError() {
      this._getData()
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: relative;
}

.bg_warp {
  width: 100%;
  height: 344px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.bg_shape {
  width: 1500px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -375px;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  overflow: hidden;
}
.bg_color {
  width: 750px;
  height: 344px;
  position: absolute;
  top: 0;
  left: 375px;
  background: linear-gradient(
    90deg,
    rgba(39, 132, 255, 1) 0%,
    rgba(78, 129, 250, 1) 100%
  );
}
.warp {
  position: relative;
  overflow-y: auto;
}
.bcOrderForm_content {
  position: relative;
  z-index: 99;
  padding-bottom: 132px;
}
.bc_content_btns {
  position: fixed;
  bottom: 0;
  z-index: 111;
  background-color: #fff;
  width: 100%;
  height: 100px;
  padding: 0 96px;
  box-sizing: border-box;
}
.isBtnStatePad {
  padding: 0 64px;
}
</style>
